<template>
    <div class="home-main">
        <div class="home-center">
            <div class="home-logo"></div>
            <div class="home-title" v-if="title">{{title}}</div>
            <div class="home-title" v-else>Api Document</div>
            <div class="home-version" v-if="version">{{version}}</div>
            <div class="home-description" v-if="description">{{description}}</div>
            <div class="home-contact" v-if="contact">{{contact.name}}</div>
            <div class="home-contact" v-if="contact">{{contact.url}}</div>
            <div class="home-contact" v-if="contact">{{contact.email}}</div>
        </div>
    </div>
</template>

<script>
  import { mapGetters } from 'vuex';

  export default {
    name: 'home',
    computed: {
      ...mapGetters([
        'title',
        'description',
        'version',
        'contact',
        'licence'
      ])
    }
  }
</script>

<style scoped>

    .home-main {
        width: 100%;
        height: 100%;
        display: table;
        text-align: center;
    }

    .home-center {
        display: table-cell;
        vertical-align: middle;
    }

    .home-logo {
        display: inline-block;
        background: url("../assets/logo.png") no-repeat 0/256px 256px;
        width: 256px;
        height: 256px;
    }

    .home-title {
        width: 100%;
        text-align: center;
        font-size: 36px;
        line-height: 72px;
        color: #D8DFEB;
    }

    .home-version {
        width: 100%;
        text-align: center;
        font-size: 18px;
        line-height: 36px;
        color: #A1AEC4;
    }

    .home-description {
        width: 100%;
        text-align: center;
        font-size: 14px;
        line-height: 28px;
        color: #64758E;
    }

    .home-contact {
        width: 100%;
        text-align: center;
        font-size: 14px;
        line-height: 28px;
        color: #64758E;
    }
</style>